<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平菜单</title>
    <style>
        a {
            text-decoration:none;
            color:black;
        }

        .container{
            width:1000;
            margin:50px auto;
        }
        .menu{
            list-style:none;
            display:flex;
            line-height:48px;
            border-bottom:2px solid #1677ff;
        }

        .menu-item{
            margin: 0 16px;
            }
        .menu-item-act    
    </style>
</head>
<body>
    <div class = "container">
        <ul class= "menu">
            <li class="menu-item"><a href="#">一级菜单项-1</a></li>
            <li class="menu-item"><a href="#">一级菜单项-2</a></li>
            <li class="menu-item"><a href="#">一级菜单项-3</a></li>
            <li class="menu-item"><a href="#">一级菜单项-4</a></li>

        </ul>
    </div>
    <script>
        const menu = document.querySelector('.menu');
        menu.addEventListener("click",(event) => {
            const menuItem = event.target.closest(".menu-item");
            if(!menuItem)return;
            if(!menu.contains(menuitem)) return;

            const active = menu.querySelector(".menu-item-active");
            if(menuItem === active) return;

            active.classList.remove("menu-item-active");
            menuItem.classList.add("menu-item-active");
        });
        </script>
    
</body>
</html>